<template>
  <div>
    <div class="gva-search-box">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="用户id">
          <el-input v-model="searchInfo.userId" placeholder="搜索条件" />
        </el-form-item>
        <el-form-item label="活动类型">
          <el-select v-model="searchInfo.activityType" placeholder="搜索条件" style="width: 100%" clearable>
            <el-option v-for="(item, key) in activity_typeOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间">
          <el-date-picker v-model="searchDate" @change="onDateChange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table ref="multipleTable" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
        <el-table-column align="center" label="用户id" prop="userId" />
        <el-table-column align="center" label="用户名" prop="userName" />
        <el-table-column align="center" label="openid" prop="openId" />
        <el-table-column align="center" label="活动类型" prop="activityType">
          <template #default="scope">
            {{ filterDict(scope.row.activityType, "activity_type") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="活动牛奶滴数" prop="marks" />
        <el-table-column align="center" label="参与时长" prop="time" />
        <el-table-column align="center" label="创建时间">
          <template #default="scope">{{ formatDate(scope.row.createTime) }}</template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="用户id:">
          <el-input v-model.number="formData.userId" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="活动牛奶滴数:">
          <el-input v-model.number="formData.marks" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="参与的时长:">
          <el-input v-model.number="formData.time" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="参与时间:">
          <el-date-picker v-model="formData.createTime" type="date" style="width: 100%" placeholder="选择日期" clearable />
        </el-form-item>
        <el-form-item label="活动类型:">
          <el-select v-model="formData.activityType" placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, key) in activity_typeOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { createActivityInfo, deleteActivityInfo, deleteActivityInfoByIds, updateActivityInfo, findActivityInfo, getActivityInfoList } from "@/api/activityInfo" //  此处请自行替换地址
import infoList from "@/mixins/infoList"
export default {
  name: "ActivityInfo",
  mixins: [infoList],
  data() {
    return {
      listApi: getActivityInfoList,
      dialogFormVisible: false,
      type: "",
      deleteVisible: false,
      multipleSelection: [],
      activity_typeOptions: [],
      searchDate: [],
      formData: {
        userId: 0,
        marks: 0,
        time: 0,
        startTime: "",
        endTime: "",
        createTime: new Date(),
        activityType: undefined,
      },
    }
  },
  async created() {
    await this.getTableData()
    await this.getDict("activity_type")
  },
  methods: {
    onReset() {
      this.searchInfo = {}
      this.searchDate = []
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    onDateChange(e) {
      if (e) {
        const [start, end] = e
        this.searchInfo.startData = start
        this.searchInfo.endData = end
      } else {
        this.searchInfo.startData = undefined
        this.searchInfo.endData = undefined
      }
    },
    deleteRow(row) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteActivityInfo(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要删除的数据",
        })
        return
      }
      this.multipleSelection &&
        this.multipleSelection.map((item) => {
          ids.push(item.ID)
        })
      const res = await deleteActivityInfoByIds({ ids })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateActivityInfo(row) {
      const res = await findActivityInfo({ ID: row.ID })
      this.type = "update"
      if (res.code === 0) {
        this.formData = res.data.reactivityInfo
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        userId: 0,
        marks: 0,
        time: 0,
        createTime: new Date(),
        activityType: undefined,
      }
    },
    async deleteActivityInfo(row) {
      const res = await deleteActivityInfo({ ID: row.ID })
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "删除成功",
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case "create":
          res = await createActivityInfo(this.formData)
          break
        case "update":
          res = await updateActivityInfo(this.formData)
          break
        default:
          res = await createActivityInfo(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: "success",
          message: "创建/更改成功",
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = "create"
      this.dialogFormVisible = true
    },
  },
}
</script>

<style></style>
